<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <div th:replace="./common/include_header :: copyright"></div>
</head>
<body>
<!-- Content Wrapper. 其他页面替换的地方-->
<!-- Main content -->
<section class="content">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="margin-left: 0px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>数据查询列表</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-warning">
                            <div class="card-header">
                                <h3 class="card-title">查询条件</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <form>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <!-- select -->
                                            <div class="form-group">
                                                <label>数据源</label>
                                                <select class="form-control" name="jdbcId" id="jdbcId">
                                                    <option th:each="jdbcDto,jdbcStat : ${jdbcDtos}"
                                                            th:value="${jdbcDto.uid}"
                                                            th:text="${jdbcDto.jdbcName }"></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <!-- select -->
                                            <div class="form-group">
                                                <label>功能块</label>
                                                <select class="form-control" name="funcId" id="funcId"
                                                        onchange="changeSql()">
                                                    <option th:each="funcDto,functat : ${funcDtos}"
                                                            th:value="${funcDto.funcUid}"
                                                            th:text="${funcDto.funcName }"></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <button type="button" class="btn btn-primary" onclick="execSql()">执行sql</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">查询sql</h3>
                            </div>
                            <!-- /.card-header -->
                            <form method="post" id="selectForm">
                                <div class="card-body">
                                    <div class="form-group" id="selectHtml">
                                        <!--<textarea class="form-control" rows="4" placeholder="功能块内容[具体sql-可自定义]"-->
                                        <!--name="funcContent"-->
                                        <!--id="funcContent" required th:text="${initSql }"></textarea>-->
                                    </div>
                                    <input type="hidden" id="initSql" th:value="${initSql }">
                                </div>
                            </form>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">结果列表 &nbsp;[共<span style="color: #dd5858"
                                                                          id="resultNumber">0</span>条记录]</h3>
                                <div class="card-tools">
                                    <div class="input-group input-group-sm" style="width: 150px;">
                                        <input type="text" name="table_search" class="form-control float-right"
                                               placeholder="Search">

                                        <div class="input-group-append">
                                            <button type="submit" class="btn btn-default">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0" style="height: 300px;z-index: 1;">
                                <table class="table table-head-fixed text-nowrap">
                                    <thead>
                                    <tr id="dataTitle">
                                        <th>ID</th>
                                        <th>User</th>
                                        <th>Date</th>
                                        <th>Status</th>
                                        <th>Reason</th>
                                    </tr>
                                    </thead>
                                    <tbody id="dataBody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
</section>
<!-- /.content -->
<!-- /.content -->
<script>
    $(function () {
        var data = $('#initSql').val();
        initSelectHtml(data);
        //功能块下拉搜索框初始化
        $('#funcId').searchableSelect();
    });

    function changeSql() {
        $.ajax({
            type: "POST",
            url: "/query/queryThisSql",
            data: "funcUid=" + $('#funcId').val(),
            success: function (data) {
                // $("#funcContent").val(data);
                initSelectHtml(data);
            },
            error: function () {
                swal(
                    'error',
                    '切换sql失败。',
                    'error'
                );
            }
        })
    }

    var globalParamNum = 0;

    function initSelectHtml(data) {
        var paramNum = (data.split("#").length - 1) / 2;
        var m = 1;
        var selectHtml = "";
        for (var i = 1; i <= paramNum; i++) {
            var begin = m;
            var end = m + 1;
            var beginPos = "#" + begin + "@";
            var temp = data.substring(data.indexOf(beginPos) + beginPos.length, data.indexOf("#" + end + "@"));
            var params = temp.split("\|");
            selectHtml = selectHtml + "<input type=\"text\" class=\"form-control\" placeholder=\"" + params[0] + "\" id=\"selectParam" + i + "\" name=\"selectParam" + i + "\" " + params[1] + ">";
            m = m + 2;
            globalParamNum = globalParamNum + 1;
        }
        $('#selectHtml').html(selectHtml);
    }

    function execSql() {
        var uid = $("#jdbcId").val();
        var funcId = $("#funcId").val();

        var selectParams = "";
//        $("input[name='selectParam']").each(
//            function (index, element) {
//                var pos = index + 1;
//                selectParams = selectParams + $(element).val() + "#" + pos + "@";
//            }
//        );
        for (var i = 1; i <= globalParamNum; i++) {
            selectParams = selectParams + $('#selectParam' + i).val() + "#" + i + "@";
        }
        $("#resultNumber").html(0);
        if ($("#selectForm").valid()) {
            $.ajax({
                type: "POST",
                url: "/query/queryResult",
                data: "uid=" + uid + "&funcId=" + funcId + "&selectParams=" + selectParams,
                success: function (data) {
                    if (data.resultNum == 0 || data.resultNum) {
                        var htmlTitle = '<th>执行成功，操作影响行数</th>';
                        $('#dataTitle').html(htmlTitle);
                        var htmlBody = '<tr>' +
                            '<td>' + data.resultNum + '</td>' +
                            '</tr>';
                        $('#dataBody').html(htmlBody);
                        $("#resultNumber").html(data.resultNum);
                        swal(
                            'success！',
                            '操作数据库成功。',
                            'success'
                        );
                        return;
                    }
                    var htmlTitle;
                    var htmlBody;
                    $("#resultNumber").html(data.queryData.length);
                    for (var i = 0; i < data.queryData.length; i++) {
                        var thisLineData = data.queryData[i];
                        var htmlLineBody = '<tr>';
                        var flag = true;
                        for (var key in thisLineData) {
                            console.log(key + ":" + thisLineData[key]);
                            if (flag) {
                                if (i == 0) {
                                    htmlTitle = htmlTitle + '<th>序号</th><th>' + key + '</th>';
                                }
                                var rowNum = i + 1;
                                htmlLineBody = htmlLineBody + '<td>' + rowNum + '</td><td>' + thisLineData[key] + '</td>'
                                flag = false;
                            } else {
                                if (i == 0) {
                                    htmlTitle = htmlTitle + '<th>' + key + '</th>';
                                }
                                htmlLineBody = htmlLineBody + '<td>' + thisLineData[key] + '</td>'
                            }
                        }
                        htmlLineBody = htmlLineBody + "</tr>";
                        htmlBody = htmlBody + htmlLineBody;
                    }
                    $('#dataTitle').html(htmlTitle);
                    $('#dataBody').html(htmlBody);
                    swal(
                        'success！',
                        '查询数据库成功。',
                        'success'
                    );
                },
                error: function () {
                    swal(
                        'error',
                        '查询数据库失败。',
                        'error'
                    );
                }
            })
        }
    }
</script>
</body>
</html>

